<template>
    <div>
        <h3 style="text-align:center;font-size: 26px;">申请开通{{`【${serviceName}】`}}</h3>
        <div>
            <el-form border ref="form" label-position="right" :model="form" label-width="156px">
                <div class="box">
                    <h4>企业基本信息</h4>
                    <el-form-item label="企业全称">
                        <el-input v-model="form.companyName"></el-input>
                    </el-form-item>
                    <el-form-item label="海关编码">
                        <el-input v-model="form.companyHsCode"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用代码">
                        <el-input v-model="form.companyCode"></el-input>
                    </el-form-item>
                    <el-form-item label="企业办公地址">
                        <el-input v-model="form.companyAdress"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人姓名">
                        <el-input v-model="form.companyContactsName"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人手机号">
                        <el-input v-model="form.companyContactsPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人电子邮箱">
                        <el-input v-model="form.companyContactsEmail"></el-input>
                    </el-form-item>
                </div>
                <div class="box">
                    <el-collapse>
                        <el-collapse-item name="1">
                            <template slot="title">
                                <h4>前置机信息</h4>
                            </template>
                            <el-form-item label="前置机服务器IP">
                                <el-input v-model="form.abutmentIp"></el-input>
                            </el-form-item>
                            <el-form-item label="前置机服务器Mac地址">
                                <el-input v-model="form.abutmentMac"></el-input>
                            </el-form-item>
                            <el-form-item label="前置机安全识别标识">
                                <el-input v-model="form.abutmentKey"></el-input>
                            </el-form-item>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div class="box">
                    <h4>其他信息</h4>
                    <el-form-item label="备注">
                        <el-input v-model="form.meno" type="textarea" :rows="5"></el-input>
                    </el-form-item>
                </div>
                <div class="box">
                    <h4>协议信息</h4>
                    <el-form-item label="">

                        <div>
                            <el-checkbox v-model="checked1"></el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;<router-link to="">
                            我已经阅读免责声明服务条款
                        </router-link>
                        </div>
                        <div>
                            <el-checkbox v-model="checked2"></el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;<router-link to="">
                            我已经阅读第三方服务数据授权条款
                        </router-link>

                        </div>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button class="submit" type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import {appendHadnle, getAppend, lastInfo} from '@/api/service'

    export default {
        data() {
            return {
                checked1: true,
                checked2: true,
                serviceName: '',
                form: {
                    companyId: '',
                    companyName: '', //企业全称
                    companyHsCode: '',//企业海关编编码
                    companyCode: '', //企业社会统一信用代码
                    companyAdress: '', //企业办公地址
                    companyContactsEmail: '',//企业负责人电子邮件
                    companyContactsName: '',//企业负责人姓名
                    companyContactsPhone: '',//企业负责人手机号
                    serviceId: '',//服务应用ID
                    serviceName: '',//服务应用名称
                    abutmentIp: '',//前置机服务器IP
                    abutmentMac: '',//前置机服务器Mac地址
                    abutmentKey: '',//	前置机安全识别标识
                    meno: ''//备注
                }
            }
        },
        created() {
            this.serviceName = this.$route.query.serviceName;
            this.form.companyId = JSON.parse(localStorage.getItem('UserInfo')).companyId;
            this.init();
        },
        watch: {
            $route() {
                this.init();
            }
        },
        methods: {
            checkFn() {
                let companyId = this.form.companyId;
                let serviceId = this.$route.query.serviceId;

                if (!companyId || companyId == '') {
                    this.$notify({
                        title: '提示',
                        message: '缺少companyId',
                        duration: 0
                    });
                    return;
                }
                if (!companyId || companyId == '') {
                    this.$notify({
                        title: '提示',
                        message: '缺少companyId',
                        duration: 0
                    });
                    return;
                }
            },
            init() {
                this.checkFn();
                let companyId = this.form.companyId;
                let serviceId = this.$route.query.serviceId;

                getAppend(companyId, serviceId).then(res => {
                    if (res.code == 0) {
                        if (res.data === '{}') {
                            lastInfo().then(rsp => {
                                if (rsp.code == 0) {
                                    if (rsp.data === '{}') {
                                        return;
                                    } else {
                                        this.form = rsp.data;
                                    }
                                }
                            })
                            return;
                        }
                        this.form = res.data;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            onSubmit() {

                let
                    companyId = this.form.companyId,
                    companyName = this.form.companyName,
                    companyHsCode = this.form.companyHsCode,
                    companyCode = this.form.companyCode,
                    companyAdress = this.form.companyAdress,
                    companyContactsEmail = this.form.companyContactsEmail,
                    companyContactsName = this.form.companyContactsName,
                    companyContactsPhone = this.form.companyContactsPhone,
                    serviceId = this.$route.query.serviceId,
                    serviceName = this.serviceName,
                    abutmentIp = this.form.abutmentIp,
                    abutmentMac = this.form.abutmentMac,
                    meno = this.form.meno,
                    abutmentKey = this.form.abutmentKey;
                if (!companyId) {
                    this.$message.error(`缺少企业id`)
                    return;
                }
                if (!companyName) {
                    this.$message.error(`请填写企业全称`)
                    return;
                }
                if (!companyHsCode) {
                    this.$message.error(`企业海关编编码`)
                    return;
                }
                if (!companyCode) {
                    this.$message.error(`企业社会统一信用代码`)
                    return;
                }

                appendHadnle(companyId, companyName, companyHsCode, companyCode, companyAdress, companyContactsEmail, companyContactsName, companyContactsPhone, serviceId, serviceName, abutmentIp, abutmentMac, meno, abutmentKey).then(res => {
                    if (res.code == 0) {
                        this.$confirm('服务申请成功，点击确定回到服务列表', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'success'
                        }).then(() => {
                            this.$router.replace({name: 'market'})
                            window.location.href = '/company/market/index'
                        })
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">

    form {
        width: 600px;
        margin: 20px auto;
        box-shadow: 0 0 5px #d8d6d6;
        padding: 20px;
        border-radius: 4px;
        .submit {
            width: 400px;
        }
        h4 {
            font-size: 18px;
            font-weight: 500;
            padding-bottom: 8px;
        }
        a {
            color: #409EFF;
        }
        .box {
            margin-bottom: 20px;

        }
    }
</style>